<script setup>

import Header from "../../components/Header/Header.vue";
import {reactive, ref} from "vue";
import {Icon} from "tdesign-icons-vue-next";

// API名字
const APITitle = ref('查找表的数据')

// API分组数据
const APIItems = ref([
  {
    label: '1',
    type: 'dir',
    children: [
      {
        label: "查找表的数据",
        type: 'api'
      }
    ],
  },
  {
    type: 'dir',
    label: '2',
    children: true,
  },
]);


// API接口信息
const APIInformation = reactive({
  APIAddress: "/userDb/selectTableData",
  method: "GET",
  consumes: '',
  produces: '',
  APIDescription: '',
  reqParams: [
    {
      paramName: 'dbName',
      comment: 'abName',
      reqType: 'query',
      isRequired: 'false',
      type: 'string',
      scheme: ''
    },
    {
      paramName: 'id',
      comment: 'id',
      reqType: 'query',
      isRequired: 'false',
      type: 'integer',
      scheme: ''
    },
    {
      paramName: 'tableName',
      comment: 'tableName',
      reqType: 'query',
      isRequired: 'false',
      type: 'string',
      scheme: ''
    }
  ],
  resStatus: [
    {
      statusCode: '200',
      comment: 'OK',
      scheme: "Result&TableDTO》",
    },
    {
      statusCode: '401',
      comment: 'Unauthorized',
      scheme: "",
    },
    {
      statusCode: '403',
      comment: 'Forbidden',
      scheme: "",
    },
    {
      statusCode: '404',
      comment: 'Not Found',
      scheme: "",
    }
  ],
  resParams: [
    {
      paramName: 'code',
      comment: '',
      type: 'integer(int32)',
      scheme: 'integer(int32)'
    },
    {
      paramName: 'map',
      comment: '',
      type: 'array',
      scheme: ''
    },
    {
      paramName: 'msg',
      comment: '',
      type: 'string',
      scheme: ''
    }
  ],
  resExample: "{\n" +
      "\t\"code\": 0,\n" +
      "\t\"data\": {\n" +
      "\t\t\"colName\": [],\n" +
      "\t\t\"tableData\": []\n" +
      "\t},\n" +
      "\t\"map\": {},\n" +
      "\t\"msg\": \"\"\n" +
      "}"
})

// 请求参数表头
const reqParamColumns = ref([
  {colKey: 'paramName', title: '参数名称'},
  {colKey: 'comment', title: '说明'},
  {colKey: 'reqType', title: '请求类型'},
  {colKey: 'isRequired', title: '必填'},
  {colKey: 'type', title: '类型'},
  {colKey: 'scheme', title: 'scheme'}
])

// 响应状态表头
const resStatusColumns = ref([
  {colKey: 'statusCode', title: '状态码'},
  {colKey: 'comment', title: '说明'},
  {colKey: 'scheme', title: 'scheme'}
])

// 响应参数表头
const resParamColumns = ref([
  {colKey: 'paramName', title: '参数名称'},
  {colKey: 'comment', title: '说明'},
  {colKey: 'type', title: '类型'},
  {colKey: 'scheme', title: 'scheme'}
])
</script>

<template>
  <t-layout>
    <Header></Header>
    <t-layout>
      <!--      API分组列表-->
      <t-aside style="border-top: 1px solid #EEEEEE;min-height: calc(100vh - 60px)">
        <t-tree :data="APIItems" hover :expand-on-click-node="true">
          <template #icon="{ node }">
            <Icon v-if="node.data.type == 'dir'" name="folder"/>
            <Icon v-if="node.data.type == 'api'" name="link"/>
          </template>
        </t-tree>
      </t-aside>
      <t-layout>
        <!--        detail-->
        <t-content style="padding: 10px">
          <t-card :title="APITitle" shadow style="width: 100%">
            <t-form>
              <t-form-item label="接口地址" name="APIAddress">
                <t-input v-model="APIInformation.APIAddress" disabled/>
              </t-form-item>
              <t-form-item label="请求方式">
                <t-input v-model="APIInformation.method" disabled/>
              </t-form-item>
              <t-form-item label="接口描述">
                <t-input v-model="APIInformation.APIDescription" disabled/>
              </t-form-item>
              <t-form-item label="请求参数">
                <t-table
                    row-key="paramName"
                    :data="APIInformation.reqParams"
                    :columns="reqParamColumns"
                    hover
                    lazy-load
                ></t-table>
              </t-form-item>
              <t-form-item label="响应状态">
                <t-table
                    row-key="ststusCode"
                    :data="APIInformation.resStatus"
                    :columns="resStatusColumns"
                    hover
                    lazy-load
                ></t-table>
              </t-form-item>

              <t-form-item label="响应参数">
                <t-table
                    row-key="paramName"
                    :data="APIInformation.resParams"
                    :columns="resParamColumns"
                    hover
                    lazy-load
                ></t-table>
              </t-form-item>

              <t-form-item label="响应实例">
                <t-textarea v-model="APIInformation.resExample" autosize />
              </t-form-item>
            </t-form>
          </t-card>
        </t-content>
      </t-layout>
    </t-layout>
  </t-layout>
</template>

<style scoped>

</style>
